<!-- page content -->
<div id="myVue" class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>
                    Vue Index Page
                </h3>
            </div>
        </div>

        <div class="clearfix"></div>
        <p>=================================</p>
        <h3>获取数据</h3>
        <p>{{user.name}}</p>

        <p>=================================</p>
        <h3>单向绑定数据</h3>
        <input type="text" :value="user.name" />

        <p>=================================</p>
        <h3>双向绑定数据</h3>
        <input type="text" v-model:value="user.name"/>
        <input type="text" v-model="user.gender"/>

        <p>=================================</p>
        <h3>循环绑定数据</h3>
        <select>
            <option v-for="(city, index) in cities" :value="city.cityId">{{city.cityName}}</option>
        </select>
        <table border="1px">
            <thead><tr><td>id</td><td>name</td></tr></thead>
            <tbody>
            <tr v-for="(city, index) in cities">
                <td>{{city.cityId}}</td>
                <td>{{city.cityName}}</td>
            </tr>
            </tbody>
        </table>

        <p>=================================</p>
        <h3>绑定事件</h3>
        <button @click="test_1()">test_1</button>
        <button id="test_2" price="22.33"  @click="test_2($event)">test_2</button>

        <p>=================================</p>
        <h3>自定义模板</h3>
        <button-demo>aaaaaa</button-demo>
        <button-count></button-count>
    </div>
</div>
<!-- /page content -->

<script>
    $(function(){
        // alert("this is init function.");
        test_1();
    });

    // 注册组件须放在 Vue 示例之前，不然会抛出警告信息
    Vue.component("button-demo", {
        template: "<button>button-demo</button>",
    });

    // 组件方式一 (.vue组件方式后期学)
    Vue.component("button-count", {
        data: function(){
            return {
                count: 0,
            };
        },
        methods: {
            count_fun: function(){
                this.count += 1;
            },
        },
        template: "<button @click='count_fun()'>{{count}}</button>",
    });

    // data中，对象用大括号；list用中括号,里面有多个对象
    //     页面需要什么就定义什么
    // method 定义 js 函数，vue实例才可调用
    var myVue = new Vue({
        el: "#myVue",
        data: {
            user: {
                name: "zhangsan",
                age: 18,
                gender: "male"
            },
            cities: [{
                cityId: "1",
                cityName: "chengdu"
            },{
                cityId: "2",
                cityName: "shanghai"
            }]
        },
        methods: {
            test_1: function(){
                console.log(this.user);
            },
            test_2: function(event){
                // Firefox 浏览器点击事件属性为 originalTarget（该浏览器特有）；Chrome 浏览器为 target
                console.log(event);

                // Firefox 浏览器
                // console.log(event.originalTarget);
                // console.log(event.originalTarget.attributes.getNamedItem("price").name);
                // console.log(event.originalTarget.attributes.getNamedItem("price").value);

                // Chrome 浏览器
                console.log(event.target);
                console.log(event.target.attributes.getNamedItem("price").name);
                console.log(event.target.attributes.getNamedItem("price").value);
            },
            // ES6 写法
            initCities: function () {
                var countryId = 522;

                // 在 Ajax 的 success 和 error 回调函数中，this 指定的是 Ajax 本身
                // 所以应该在 Ajax 外用 self 装 Vue 实例的属性，然后回调函数通过如self.cities 赋值给属性
                var self = this;

                $.ajax({
                    url: "/api/cities/" + countryId,
                    type: "get",
                    // 参数传递在路径上，所以注释掉
                    // contentType: "application/json",
                    // data: JSON.stringify(self.searchBean),
                    success: function (rs) {
                        // 解开注释会遍历 id=522 的国家的所有城市，占网页篇幅
                        // self.cities = rs;
                        console.log(rs);
                    },
                    error: function (data) {
                        layer.alert(data.responseText, { icon: 0 });
                    },
                });
            }
        },
        // 把vue的函数赋给window，让外部也可以调用
        created: function () {
            window.test_1 = this.test_1;
        },
        //mounted 生命周期挂钩子 ---- 初始化页面函数的时候，在此处挂钩
        mounted: function () {
            this.initCities();
        }
    });
</script>